<template>
  <div class="index">
    <!-- 入驻歌手区域 -->
    <div class="singer">
      <div>
        <h4>入驻歌手</h4>
        <el-link>查看全部></el-link>
      </div>
      <hr />
      <div class="sin" v-for="(item, index) in info" :key="index">
        <img :src="`${item.url}`" alt="" />
        <div class="rightinfo">
          <span>{{ item.name }}</span
          ><br />
          <el-tooltip
            :content="`${item.message}`"
            placement="bottom"
            effect="light"
            class="more"
          >
            <el-button class="bu">{{ item.message }}</el-button>
          </el-tooltip>
        </div>
      </div>
      <el-button :plain="true" @click="open2" class="shenqing"
        >申请成为网易音乐人</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "Singer",
  data() {
    return {
      info: [
        {
          name: "林俊杰",
          url: require("../assets/singer/1.png"),
          message:
            "最佳亚洲艺人奖、第21届金曲奖最佳男歌手、代表作品:《关键词》《修炼爱情》",
        },
        {
          name: "李建",
          url: require("../assets/singer/2.png"),
          message: "中国著名流行男歌手、代表作品:《传奇》《风吹麦浪》《向往》",
        },
        {
          name: "G.E.M.邓紫棋",
          url: require("../assets/singer/3.png"),
          message:
            "最佳亚洲艺人奖、音乐风云榜最受欢迎女歌手、代表作品:《泡沫》",
        },
        {
          name: "华晨宇",
          url: require("../assets/singer/4.png"),
          message: " 年度最佳偶像、代表作品:《国王与乞丐》《异类》  ",
        },
        {
          name: "李荣浩",
          url: require("../assets/singer/5.png"),
          message:
            "台湾金曲奖最佳新人、华语榜中榜内地最佳男歌手、代表作品:《年少有为》《爸爸妈妈》",
        },
      ],
    };
  },
  methods: {
    open2() {
      this.$message({
        // showClose: true,
        message: "非常抱歉，暂未开启此功能",
        type: "warning",
      });
    },
  },
};
</script>

<style scoped>
.index {
  position:absolute;
  left: -1px;
  height: 1091px;
  margin-top: 52px;
  border: 1px solid #ccc;
  padding: 13px;
  width: 229px;
  background-color: white;
}
h4 {
  font-size: 14px;
  width: 149px;
  display: inline;
}
.el-link {
  float: right;
}
.sin {
  height: 60px;
  border: 1px solid #ccc;
  margin: 15px auto;
  border-radius: 2px;
  border-radius: 5px;
  overflow: hidden;
}
.sin:hover {
  transform: all 0.5s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.singer img {
  float: left;
  width: 60px;
}
.rightinfo {
  float: left;
  margin-left: 7px;
  padding-top: 5px;
}
span {
  font-size: 15px;
}
.more {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bu {
  border: none;
  margin: 0px;
  padding: 0px;
  font-weight: 400;
  margin-top: 12px;
}
.bu:hover {
  background-color: #fff;
}
.shenqing {
  width: 180px;
  height: 28px;
  border: 1px solid #ccc;
  margin-left: 24px;
  border-radius: 8px;
  text-align: center;
  line-height: 3px;
  font-size: 12px;
  font-weight: 500;

}
.shenqing:hover {
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
</style>
